<script setup lang="ts">
import { sendCommentAPI } from '@/apis/sendComment'
import { uploadFileAPI } from '@/apis/uploadFile'
import { useUserInfoStore } from '@/store/userInfo'
import type { CommentDetail } from '@/types/api'

const userInfoStore = useUserInfoStore()

const oldData = ref<CommentDetail>()
const orderId = ref('')

const formData = ref({
  score: 5,
  content: '',
  image: [] as string[],
})

onLoad((options) => {
  if (options?.old_data)
    oldData.value = JSON.parse(options.old_data)
  if (options?.order_id)
    orderId.value = options.order_id
})

/* ------------------------------- 选择照片 START ------------------------------- */
/**
 * @description 处理选择照片事件
 */
function handlePickImage() {
  uni.chooseFile({
    type: 'image',
    complete: (result) => {
      (result.tempFiles as File[]).forEach(async (file) => {
        const res = await uploadFileAPI({
          tempFilePath: (file as any).path,
          fileType: 'image',
        }, userInfoStore.userInfo!.token!)
        if (res.data) {
          const resData = JSON.parse(res.data)
          formData.value.image.push(resData.data.fullurl)
        }
      })
    },
  })
}

/**
 * @description 处理删除照片事件
 */
function handleDeleteImage(picture: string) {
  formData.value.image = formData.value.image
    .filter(item => item !== picture)
}
/* -------------------------------- 选择照片 END -------------------------------- */

const handleSubmit = useThrottleFn(async () => {
  const res = await sendCommentAPI({
    ...formData.value,
    score: formData.value.score.toString(),
    image: formData.value.image.join(','),
    order_id: orderId.value,
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1) {
    uni.showToast({ title: res.data?.msg, icon: 'none' })
    return
  }
  uni.showModal({
    title: '评价成功',
    showCancel: false,
    success: (result) => {
      if (result.confirm) {
        oldData.value = {
          ...formData.value,
          score: formData.value.score,
          image: formData.value.image.join(','),
          replay: '',
        }
      }
    },
  })
}, 1000)
</script>

<template>
  <Spacer height="30" />
  <view v-if="oldData" class="bg-white px-24rpx">
    <Spacer height="40" />
    <view class="flex items-center">
      <image
        class="h-50rpx w-50rpx rounded-full bg-gray-50"
        :src="userInfoStore.userInfo?.avatar"
      />
      <Spacer width="16" />
      <view class="text-28rpx text-#333333 font-medium leading-28rpx">
        {{ userInfoStore.userInfo?.nickname || '-' }}
      </view>
      <Spacer width="8" />
      <Rate :star="oldData.score" :count="5" />
    </view>
    <Spacer height="20" />
    <view class="text-26rpx text-#333333 font-medium leading-38rpx">
      {{ oldData.content }}
    </view>
    <Spacer height="30" />
    <PictureGrid mode="display" :pictures="oldData.image.split(',')" :cols="4" :width="702" />
    <Spacer height="30" />
    <view class="font-meidum rounded-20rpx bg-#F8F8F8 px-28rpx py-30rpx text-28rpx text-#333333 leading-40rpx" />
    <Spacer height="120" />
  </view>
  <view v-else class="px-24rpx">
    <view class="rounded-20rpx bg-white p-30rpx">
      <view class="text-30rpx text-#333333 font-medium leading-30rpx">
        评价星级
      </view>
      <Spacer height="24" />
      <Rate :star="formData.score" :count="5" />
      <Spacer height="40" />
      <Divider width="642" />
      <Spacer height="34" />
      <textarea
        v-model="formData.content"
        class="text-28rpx text-#333333 font-medium leading-40rpx"
        placeholder="请输入文字信息"
        placeholder-class="text-#999999"
      />
      <Spacer height="34" />
      <view class="text-30rpx text-#333333 font-medium leading-30rpx">
        上传图片（选填）
      </view>
      <Spacer height="24" />
      <PictureGrid
        mode="edit"
        :pictures="formData.image"
        :cols="4"
        :width="642"
        @pick-image="handlePickImage"
        @delete="handleDeleteImage"
      />
    </view>
  </view>
  <view class="fixed bottom-40rpx x-center">
    <RGButton @tap="handleSubmit">
      提交
    </RGButton>
  </view>
</template>

<route lang="yaml">
name: 'rateDriver'
style:
  navigationBarTitleText: '评价司机'
</route>
